<template>
<div class="container-app">
    <div class="hot-container">
        <!-- 标题，，-- tab栏切换 -->
        <div class="hot-header">
            <van-tabs v-model="active" :line-width="0" :ellipsis="false" @click="selectTabs">
            <van-tab title="热映影片"></van-tab>
            <van-tab title="新热预告"></van-tab>
            </van-tabs>
            <div class="hot-right">
                <span style="display: inline-block; width:15vw">全部 &nbsp;{{moviewTotal}}</span>
               <van-icon name="arrow" />
            </div>
        </div>
        <div v-show="flag">
               <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div v-for="(item,index) in list" :key="index"
                         class="swiper-slide"
                         @click="$router.push(`/prodetail/?name=${item.name}`)">
                            <!-- <h3>{{ item.title }}</h3> -->
                            <img :src="item.url" alt=""/>
                            <div class="score">{{item.score}}分</div>
                           <span>
                             {{item.name}}
                           </span>
                           <div
                            @click.prevent="wanWatch(index)"
                             :class="{'added': item.isAdded, 'admin-button': !item.isAdded}"
                           >
                              {{ item.isAdded ? '已想看' : '想看' }}
                           </div>
                            <!-- <el-button>立即办理</el-button> -->
                        </div>
                    </div>
                    <!-- <div class="swiper-pagination"></div> -->
                </div>
        </div>
        <div v-show="!flag">
          <div class="admin-empty">
            <van-empty :image-size="120" description="暂无内容" />
          </div>
        </div>
    </div>

    <!-- 确认弹框组件 -->
      <van-dialog
      :showConfirmButton = "false"
      v-model="showDialog"
      :width="300"
      >
         <div class="showDialog">
          <span>想看的电影已记录到我的淘票票时光</span>
          <span>上映后会提醒你哟</span>
         </div>
      </van-dialog>
</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  name: 'PannelPage',
  components: {},
  data () {
    return {
      showDialog: false,
      active: 0,
      swiper: null,
      flag: true,
      moviewTotal: 8,
      list: [
        {
          name: '狮子王·木法沙传奇', url: require('@/assets/commont/hot1.jpg'), score: '9.5', isAdded: false
        },
        {
          name: '好东西', url: require('@/assets/commont/hot2.jpg'), score: '9.6', isAdded: false
        },
        {
          name: '误判', url: require('@/assets/commont/hot3.jpg'), score: '9.3', isAdded: false
        },
        {
          name: '破·地狱', url: require('@/assets/commont/hot4.jpg'), score: '9.6', isAdded: false
        },
        {
          name: '小小的我', url: require('@/assets/commont/hot5.jpg'), score: '9.6', isAdded: false
        },
        {
          name: '雄狮少年2', url: require('@/assets/commont/hot6.jpg'), score: '9.3', isAdded: false
        },
        {
          name: '名侦探柯南:迷宫的十字路口', url: require('@/assets/commont/hot7.jpg'), score: '9.6', isAdded: false
        },
        {
          name: '误杀3', url: require('@/assets/commont/hot8.jpg'), score: '9.6', isAdded: false
        }
      ]
    }
  },
  methods: {
    wanWatch (index) {
      event.stopPropagation()
      if (!this.list[index].isAdded) {
        this.showDialog = true
        setTimeout(() => {
          this.showDialog = false
        }, 1200)
      }
      this.list[index].isAdded = !this.list[index].isAdded
    },
    selectTabs (e) {
      if (e === 0) {
        this.getSwiper()
        this.flag = true
        this.moviewTotal = 8
      } else {
        this.flag = false
        this.moviewTotal = null
      }
    },
    getSwiper () {
      this.swiper = new Swiper('.swiper-container', {
        // loop: true, // 无缝
        // autoplay: { // 自动开始
        //   delay: 3000, // 时间间隔
        //   disableOnInteraction: false //* 手动操作轮播图后不会暂停*
        // },
        paginationClickable: true,
        slidesPerView: 3.7, // 一组三个
        spaceBetween: 10, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true
      })
    }

  },
  mounted () {
    this.getSwiper()
  }
}
</script>

<style lang="less" scoped>
.container-app{
    padding: 0;
    background-color: #fff;
    margin-top: 2vw;
    border-radius: 3vw;
}
  .admin-empty{
    height: 44vw;
    padding: 0 5vw;
    .van-empty{
      height: 100%;
    }
  }
  .showDialog{
    // margin: ;
    width: 100%;
    // height: 25vw;
     background: linear-gradient(to right, #f5d96a, #d785b6);
     span{
      padding: 0 5vw;
      display: inline-block;
      text-align: center;
      width: 100%;
      height: 10vw;
      line-height: 10vw;
     }
  }
    .hot-container {
        width: 100%;
        padding: 3vw 3vw;
        .hot-header{
            width: 100%;
            display: flex;
            justify-content: space-between;
            ::v-deep .van-tab--active{
                padding: 0;
                font-size: 4.5vw;
                font-weight:800;
            }
            .hot-right{
                width: 20vw;
                height: 100%;
                margin-top: 4%;
                font-size: 3.4vw;
                color: rgb(139, 144, 148);
            }
        }
        .swiper-slide {
            position: relative;
            height: 44vw;
            width: 36vw;
            background-repeat: no-repeat;
            background-size: contain;
            // background-color: pink;
            img{
                height: 68%;
                width: 100%;
            }
            span{
                display: inline-block;
                width: 15vw;
                // 文字超过盒子宽度部分省略
                 overflow: hidden; /* 超出部分隐藏 */
                white-space: nowrap; /* 防止换行 */
                text-overflow: ellipsis; /* 超出的文本部分显示省略号 */
                // 字体之间间隔
                 letter-spacing: 0.3vw;
                font-size: 2.8vw;
                margin: 0.9vw 0;
            }
            .admin-button{
                width: 15vw;
                height: 6vw;
                border-radius: 3vw;
                text-align: center;
                font-size: 3.3vw;
                letter-spacing: 0.6vw;
                background: linear-gradient(to right, #ffc850, #fa7212);
                 color: #fff; /* 设置字体颜色为白色 */
                 line-height: 6vw;
            }
            .added{
                width: 15vw;
                height: 6vw;
                border-radius: 3vw;
                text-align: center;
                font-size: 3.3vw;
                letter-spacing: 0.6vw;
                border: 1px solid #959595;
                // background: linear-gradient(to right, #ffc850, #fa7212);
                //  color: #fff; /* 设置字体颜色为白色 */
                color: #959595;
                 line-height: 6vw;
            }
            .score{
                position: absolute;
                width: 8vw;
                height: 4vw;
                font-size: 2.8vw;
                top:58%;
                z-index: 99;
                text-align: center;
                color: #fff;
                // background-color: red;
            }
        }
    }

</style>
